import React, { useState } from "react";
import { X, AlertCircle } from "lucide-react";
import { MoodEmoji } from "./MoodEmoji";

interface MoodCreateModalProps {
  error?: string;
  onClose: () => void;
  onSave: (data: { mood: { level: 1 | 2 | 3 | 4 | 5 }; remark: string }) => void;
}

export function MoodCreateModal({ error, onClose, onSave }: MoodCreateModalProps) {
  const [formData, setFormData] = useState({
    mood: { level: 3 as 1 | 2 | 3 | 4 | 5 },
    remark: ""
  });

  const MAX_REMARK_LENGTH = 100;

  const handleRemarkChange = (value: string) => {
    if (value.length <= MAX_REMARK_LENGTH) {
      setFormData(prev => ({ ...prev, remark: value }));
    }
  };

  return (
    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50">
      <div className="fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] w-full max-w-lg">
        <div className="bg-card rounded-lg p-6 shadow-xl">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-xl font-bold">记录新心情</h2>
            <button onClick={onClose} className="p-2 hover:bg-accent rounded-lg transition-colors">
              <X className="w-4 h-4" />
            </button>
          </div>

          {error && (
            <div className="mb-6 p-4 text-sm text-destructive bg-destructive/10 rounded-lg flex items-center gap-2 animate-shake">
              <AlertCircle className="w-5 h-5 flex-shrink-0" />
              <p>{error}</p>
            </div>
          )}

          <div className="space-y-6">
            <div>
              <label className="block text-sm font-medium mb-2">心情等级</label>
              <div className="flex gap-4">
                {[1, 2, 3, 4, 5].map((level) => (
                  <button
                    key={level}
                    onClick={() => setFormData(prev => ({
                      ...prev,
                      mood: { level: level as 1 | 2 | 3 | 4 | 5 }
                    }))}
                    className={`text-2xl p-2 rounded-lg transition-all ${
                      formData.mood.level === level ? "bg-primary/20 scale-110" : "hover:bg-accent"
                    }`}
                  >
                    <MoodEmoji level={level as 1 | 2 | 3 | 4 | 5} />
                  </button>
                ))}
              </div>
            </div>

            <div>
              <div className="flex justify-between items-center mb-2">
                <label className="block text-sm font-medium">备注</label>
                <span className={`text-xs ${
                  formData.remark.length >= MAX_REMARK_LENGTH ? 'text-destructive' : 'text-muted-foreground'
                }`}>
                  {formData.remark.length}/{MAX_REMARK_LENGTH}
                </span>
              </div>
              <textarea
                value={formData.remark}
                onChange={(e) => handleRemarkChange(e.target.value)}
                maxLength={MAX_REMARK_LENGTH}
                className="w-full px-3 py-2 border rounded-lg bg-background min-h-[100px]"
                placeholder="写下更多感受..."
              />
            </div>

            <div className="flex justify-end gap-4 pt-4 border-t">
              <button
                onClick={onClose}
                className="px-4 py-2 text-sm rounded-lg hover:bg-accent transition-colors"
              >
                取消
              </button>
              <button
                onClick={() => onSave(formData)}
                className="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
              >
                保存
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
